<!-- This document was created with HomeSite 2.5 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)2000 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun, J. Brook Monroe, nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
-->
<HEAD>
<TITLE>The Mobile Mouse II</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function Describe(text)
{
eval('document.forms[0].explain.value="'+text+'"');
}
function CleanIt()
{
eval('document.forms[0].explain.value=""');
}
//-->
</SCRIPT>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>The Mobile Mouse II</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
In this recipe we look into more mouse events.
</FONT>
<P><CENTER>(If you've seen <FONT COLOR="007777">The Mobile Mouse I</FONT>, this is going to look very familiar!)<BR>Move the mouse cursor over the images!<BR><TABLE>
<TR>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Just some clips.')"><IMG SRC="../GRAFX/MOUSEOVR/PAPERCLP.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Protection from UV rays!')"><IMG SRC="../GRAFX/MOUSEOVR/SUNGLASS.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Football? Soccer?')"><IMG SRC="../GRAFX/MOUSEOVR/STADIUM.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Who\'s watching whom?')"><IMG SRC="../GRAFX/MOUSEOVR/EYE.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('A three hour tour?')"><IMG SRC="../GRAFX/MOUSEOVR/ISLAND.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('The Halls of Justice!')"><IMG SRC="../GRAFX/MOUSEOVR/JUSTICE.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
</TR>
<TR>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('21 gears and big tires')"><IMG SRC="../GRAFX/MOUSEOVR/BIKE.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Lights! Camera!')"><IMG SRC="../GRAFX/MOUSEOVR/CLAPBORD.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Some days I just shoulda stood in bed.')"><IMG SRC="../GRAFX/MOUSEOVR/BED.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Ouch. That\'ll leave a mark.')"><IMG SRC="../GRAFX/MOUSEOVR/COMPRESS.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Don\'t call me late for dinner.')"><IMG SRC="../GRAFX/MOUSEOVR/DINNER.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Why is this here?')"><IMG SRC="../GRAFX/MOUSEOVR/OILDRUM.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
</TR>
<TR>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('CD-ROMS are better than books!')"><IMG SRC="../GRAFX/MOUSEOVR/BOOKS.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('I\'m a closet thespian.')"><IMG SRC="../GRAFX/MOUSEOVR/THEATER.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Avoid managers carrying these.')"><IMG SRC="../GRAFX/MOUSEOVR/CLIPBORD.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Lotto winnings?')"><IMG SRC="../GRAFX/MOUSEOVR/MONEYBAG.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('The hills are alive with the sound of this.')"><IMG SRC="../GRAFX/MOUSEOVR/MUSIC.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
<TD><A HREF="" onMouseOut="CleanIt()" onMouseOver="Describe('Okay, gray, green, why not purple?')"><IMG SRC="../GRAFX/MOUSEOVR/ALIEN.GIF" WIDTH=34 HEIGHT=34 BORDER=0 ></A></TD>
</TR>
</TABLE>
<FORM>
<INPUT type="text" name="explain" SIZE=48>
</FORM>
</CENTER>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
In <FONT COLOR="007777">The Mobile Mouse I</FONT>, we learned how to use the <FONT COLOR="770000">onMouseOver()</FONT>
event to trigger changes to a web page whenever the mouse cursor moved over certain areas. What we didn't have was
an easy way to "change it back" when the mouse cursor exited one of those areas. This recipe does just that, with the
Netscape 3.0+ and Internet Explorer 4.0+ <FONT COLOR="770000">onMouseOut()</FONT> event. <P>
Where anchor tag content in <FONT COLOR="007777">The Mobile Mouse I</FONT> was (leaving out unnecessary details)
<FONT COLOR="770000"><PRE><A HREF="" onMouseOver="Describe('...')">...</A></PRE></FONT>
in this recipe we add another event:
<FONT COLOR="770000"><PRE><A HREF="" <u>onMouseOut="CleanIt()"</u> onMouseOver="Describe('...')">...</A></PRE></FONT>
(we underlined the new bit to make it more visible).<P>
<FONT COLOR="770000">onMouseOut()</FONT> can be used by itself if you like, and you don't need to use it only to "undo"
the results of <FONT COLOR="770000">onMouseOver()</FONT>.
<BR><BR><h5>Copyright ©2000 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>